<template>
	<view class="page">
		<view class="sign-paper" v-if="!signFlag">
			<uni-section class="section" title="文件详情" :sub-title="subTitle" type="line">
				<view class="file-box">
					<view class="file-detail">

					</view>
					<zb-popover placement="right-end" :options="actions" ref="Popover" @handleClick="handleClick"
						@select="selected" class="item-popover">
						<image class="sign-image" v-if="signUrl" :src="signUrl" mode="scaleToFill"></image>
					</zb-popover>
				</view>
			</uni-section>
			<button type="warn" class="btn" @click="reasonForLoan">{{signUrl?'确认签署':'签署文件'}}</button>
		</view>
		<view class="autograph" v-else>
			<l-signature disableScroll ref="signatureRef" :penColor="penColor" :penSize="penSize" backgroundColor="#fff"
				preferToDataURL landscape :openSmooth="openSmooth"></l-signature>
			<view class="write-btn">
				<button @click="writeOperation('clear')">清空</button>
				<button @click="writeOperation('undo')">撤消</button>
				<button type="primary" @click="writeOperation('save')">保存</button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				subTitle: "xxx与xxx的电子借条.pdf",
				signFlag: false,
				penColor: '#333',
				penSize: 5,
				signUrl: '',
				openSmooth: true,
				actions: [{
						text: '删除'
					},
					{
						text: '重签'
					}
				]
			}
		},
		onLoad() {

		},
		onReady() {

		},
		methods: {
			/** 签署文件or确认签署 */
			reasonForLoan() {
				if (this.signUrl) { //确认签署
					uni.showToast({
						title: '签署中',
						icon: 'none'
					})
				} else {
					this.signFlag = !this.signFlag
				}
			},
			/** 签名 */
			writeOperation(type) {
				if (type == 'save') {
					this.$refs.signatureRef.canvasToTempFilePath({
						success: (res) => {
							console.log(res)
							if (!res.isEmpty) {
								// 生成图片的临时路径
								// H5 生成的是base64
								this.signUrl = res.tempFilePath
								this.signFlag = !this.signFlag
							}
						}
					})
					return
				}
				if (this.$refs.signatureRef)
					this.$refs.signatureRef[type]()
			},
			handleClick(e) {
				//console.log(e)
			},
			selected(e) {
				console.log(e)
				this.signUrl = ''
				if (e.text === '删除') {

				} else {
					this.signFlag = !this.signFlag
					if (this.$refs.signatureRef)
						this.$refs.signatureRef.clear()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
		height: 100vh;
		box-sizing: border-box;
		background-color: #F7F7F7;

		.sign-paper {
			width: 100%;

			.section {
				width: 100%;

				.file-box {
					min-height: 640rpx;
					position: relative;

					.item-popover {
						position: absolute;
						bottom: 0;
						left: 0;
					}

					.sign-image {
						height: 120rpx;
						position: absolute;
						transform: rotate(0deg);
						bottom: 0;
						left: 0;
					}
				}
			}

			.btn {
				width: 100%;
				margin-top: 40rpx;
			}
		}

		.autograph {
			width: 100%;
			height: 100vh;
			position: relative;

			.write-btn {
				position: absolute;
				left: -140rpx;
				bottom: 160rpx;
				transform: rotate(90deg);
				display: flex;

				button {
					font-size: 26rpx;
					margin: 0 8rpx;
				}
			}
		}

	}
</style>